<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" :inline="true">
      <div class="sub-tit">经销商信息</div>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.name" class="item-lang" />
      </el-form-item>
      <el-form-item label="角色/职务" prop="role">
        <el-input v-model="form.role" class="item-lang" />
      </el-form-item>
      <el-form-item label="经销商姓名" prop="name">
        <el-input v-model="form.name" class="item-lang" />
      </el-form-item>
      <el-form-item label="所属行业">
        <el-input v-model="form.nam" class="item-lang" />
      </el-form-item>
      <el-form-item label="行业细分">
        <el-input v-model="form.name2" class="item-lang" />
      </el-form-item>
      <el-form-item label="合作意向">
        <el-select v-model="form.level" placeholder="请选择" class="item-lang">
          <el-option v-for="dict in dict.type.coopr_will" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="经销商来源" prop="source">
        <el-input v-model="form.source" class="item-lang" />
      </el-form-item>
      <el-form-item label="细分来源">
        <el-input v-model="form.name3" class="item-lang" />
      </el-form-item>
      <el-form-item label="经销商等级">
        <el-select v-model="form.level" placeholder="请选择" class="item-lang">
          <el-option v-for="dict in dict.type.dealer_level" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <div class="sub-tit">门店信息</div>
      <el-form-item label="营业执照" prop="phone">
        <file-upload :isShowTip="true" :fileSize="20" :limit="1" :fileType="['png', 'jpg']"
          class="item-lang"></file-upload>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="shcode">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="法人姓名" prop="frname">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="门店名称" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="员工规模" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="门店地址" prop="phone">
        <el-cascader v-model="selectedOptions" :options="pcaTextArr" @change="handleChange"
          class="item-lang"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" class="lang" prop="phone">
        <el-input type="textarea" v-model="form.address" class="item-lang" />
      </el-form-item>
      <el-form-item label="收货人姓名" prop="frname">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="收货人手机号" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <div class="sub-tit">项目信息</div>
      <el-form-item label="合作项目" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="线类型" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="开线时间" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="折扣" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="政策" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="定金缴纳日期" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="定金缴纳金额" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="银行流水截图" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="归属人员" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="归属战队" prop="phone">
        <el-input v-model="form.name" class="item-lang"></el-input>
      </el-form-item>
      <el-form-item label="备注" class="lang">
        <el-input type="textarea" v-model="form.remark" class="item-lang" />
      </el-form-item>
    </el-form>
    <div class="bottom-button">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>

<script>
import { pcaTextArr } from "element-china-area-data";
export default {
  dicts: ["dealer_level", "coopr_will"],
  data() {
    return {
      pcaTextArr,
      form: {},
      rules: {
        name: [
          { required: true, message: "经销商名称不能为空", trigger: "blur" },
        ],
        role: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        frname: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
        shcode: [
          { required: true, message: "角色顺序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
  created() {
    console.log(this.$route.name)
  },
};
</script>

<style lang="scss" scoped>
.bottom-button {
  margin-left: 140px;
}

.el-form {
  max-width: 1000px;

  .item-lang {
    width: 300px;
  }
}

.sub-tit {
  border-left: 8px solid #409eff;
  margin: 20px 0;
  padding: 3px 0 3px 25px;
  font-size: 18px;
  font-weight: bold;
}

.el-form .lang {
  width: 800px;

  ::v-deep .el-form-item__content {
    width: calc(100% - 245px);
  }
}
</style>
